<template>
    <div>


        <div class=" app_width">

            <el-table stripe border fit highlight-current-row
                      :key='tableKey'
                      :data="listData"
                      v-loading="listLoading"
                      element-loading-text="正在加载..."
                      style="width: 100%"

            >


                <el-table-column align="center" header-align="center" label="图片"
                >
                    <template #default="scope">

                        <img :src="BASE_API+scope.row.image" style="width: 60px;height: 60px">


                    </template>
                </el-table-column>
                <el-table-column align="left" header-align="center" label="商品名称">
                    <template #default="scope">
                        {{ scope.row.goodsinfoname }}

                    </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" label="单价">
                    <template #default="scope">

                        {{ scope.row.ordersprice }}

                    </template>
                </el-table-column>
                <el-table-column align="left" header-align="center" label="数量">
                    <template #default="scope">


                        <el-input-number v-model="scope.row.shopcartnumber"
                                         @change="handleNumberChange(scope.row)" :min="1"

                                         size="small"></el-input-number>


                    </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" label="金额">
                    <template #default="scope">
                        {{ scope.row.goods_all }}


                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作">
                    <template #default="scope">

                        <el-button type="danger" size="small" @click="handleDelete(scope )">
                            删除
                        </el-button>


                    </template>
                </el-table-column>
            </el-table>

            <el-card style="text-align: right;margin-top: 5px">
                合计:
                {{  (orders_all) }}
                元

                <el-button
                    :disabled="!orders_all>0"
                    type="primary" size="small" @click="handleOrders()">
                    结算
                </el-button>

            </el-card>
        </div>

        <el-dialog :close-on-click-modal="false" title="在线支付" v-model="dialogFormVisible_pay"
                   width="40%" top="5vh">
            <orderspay-form
                :dialogFormVisible="dialogFormVisible_pay"
                :dataId='dialogFormId'
                @close="closeDialog"
                :newRow.sync="newRowDataId"
            >
            </orderspay-form>
        </el-dialog>

    </div>

</template>
<script name="search" setup>

import {onMounted, ref} from "vue";

const postFormRef = ref(null) // 如果页面有表单,则使用此ref
const route = useRoute();   //获取路由中的信息或参数
const router = useRouter();   //操作路由,跳转之类的
import {ElMessage, ElMessageBox} from "element-plus";  //提示框和消息



import orderitemForm from "./orders_item.vue";
import orderspayForm from "./orders_pay.vue";
import axios_request from '../../util/axios_request.js'


const BASE_API = ref('http://localhost:8081/');


const orders_all = ref(0)//合计
const ordersid = ref(0)//订单ID

const tableKey = ref(0)//表格key

const listData = ref(null)//列表数据
const listLoading = ref(false)//加载提示
//对话框
const dialogFormVisible = ref(false)//是否显示对应框//商品明细
const dialogFormVisible_pay = ref(false)//是否显示对应框  支付
const dialogFormId = ref(0)//编辑时的ID

const dialogForm_viewISevaluate = ref(0)//viewISevaluate   0查看商品明细
const newRowDataId = ref(0)//添加或编辑后的新行的值


onMounted(() => {
    getList()

})

import {useRoute, useRouter} from "vue-router";

function getList() {

    listLoading.value = true

    axios_request.get('/web/myShopcart.action').then(response => {
        response.data.shopcartList.forEach(function (item) {
            item.shopcartnumber = parseInt(item.shopcartnumber)
        });
        listData.value = response.data.shopcartList
        orders_all.value = (response.data.orders_all)

        listLoading.value = false

    })

}

//改变库存数量
function handleNumberChange(shopcart) {


    // 提交
    axios_request.post('/web/updateShopCart.action', shopcart).then(response => {
        ElMessage({message: response.msg})
        if (response.msg) {
            getList()
        }
    })


}

//生成订单
async function handleOrders() {


    let orders = {}//订单信息
    //orders.usersid = usersid_web.value
    orders.ordersaddress = ''
    orders.orders_all = orders_all.value


    await axios_request.post('/web/addOrders.action', orders).then(response => {
        ordersid.value = response.data
    })


    await listData.value.forEach((item, i) => {
        //console.log(item)
        let ordersitem = {}
        ordersitem.ordersid = ordersid.value
        ordersitem.goodsinfoid = item.goodsinfoid
        ordersitem.goodsnumber = item.shopcartnumber
        ordersitem.ordersprice = item.ordersprice
        ordersitem.shopcartid = item.shopcartid
        axios_request.post('/web/addOrdersitem.action', ordersitem).then(response => {


        })
        //   item.addtime = parseTime(item.addtime, '{m}-{d}')//排时间戳处理成日期 日期转换
    })

    if (ordersid.value > 0) {
        //支付 过程

        dialogFormId.value = parseInt(ordersid.value) //当前操作的ID

        dialogFormVisible_pay.value = true

    } else {
        ElMessage({
            message: '无订单ID'
        })
    }

}

//删除过程
function handleDelete(scope) {

    ElMessageBox.confirm("确定要进行此操作吗?", "提示").then(() => {
        //删除
        const id = scope.row.shopcartid

        axios_request.get('/web/deleteShopcart.action?id=' + id).then(response => {
            ElMessage({
                message: response.msg
            })
            if (response.msg) {
                getList()
            }


        })

    }).catch(() => {
    });

}


//关闭 弹窗
function closeDialog() {
    dialogFormVisible.value = false;    //隐藏el-dialog
    dialogFormVisible_pay.value = false;    //隐藏el-dialog
    router.push('myorders')

}


</script>


